<template>
  <!-- 付款详情 -->
  <div class="box">
    <div class="head">
      <van-icon
        @click="router.back()"
        style="
          width: 3rem;
          height: 3rem;
          border-radius: 50%;
          background-color: #ffc733;
          line-height: 3rem;
          text-align: center;
        "
        name="cross"
      />
      <span>查看详情</span>
      <van-icon name="ellipsis" style="transform: rotate(90deg)" />
    </div>
    <div class="main">
      <h2>付款成功</h2>
      <van-cell title="理发师" :value="info?.passback_params?.lifaname" />
      <van-cell title="地址" :value="info?.passback_params?.address" />
      <van-cell title="姓名" :value="info.buyer_login_id" />
      <van-cell title="电话" :value="info?.passback_params?.phone" />
      <van-cell
        title="预定时间"
        :value="
          dayjs(info?.passback_params?.datetime).format('YYYY-MM-DD HH:mm:ss')
        "
      />
      <van-cell
        :title="'发型' + '(' + info?.passback_params?.service + ')'"
        :value="info.total_amout"
      />
      <van-cell title="总计" :value="info.total_amout" />
    </div>
    <button class="btn" @click="router.push('/')">返回首页</button>
  </div>
</template>

<script setup>
import axios from "axios";
import qs from "qs";
import dayjs from "dayjs";
import { ref, reactive } from "vue";
import QRCode from "qrcode";
import { useRoute, useRouter } from "vue-router";
axios.defaults.baseURL = "http://127.0.0.1:3000";
const router = useRouter();
const route = useRoute();
let data = {
  out_trade_no: route.query.out_trade_no,
  trade_no: route.query.trade_no,
};
const info = ref({});

axios({
  url: "/shopfront/api/queryOrder",
  method: "post",
  headers: {
    "Content-type": "application/x-www-form-urlencoded",
  },
  data: qs.stringify(data),
}).then((res) => {
  console.log(res.data);
  if (res.data.code == 200) {
    info.value = res.data;
    if (res.data.package_id!='') {
      let obj = {
        amout: res.data.total_amout, //金额
        trade: res.data.trade_no, //订单号
        phone: res.data.passback_params.phone, //电话
        time: res.data.passback_params.datetime, //预约时间
        stylistId: res.data.passback_params.stylist_id,
        salonId: res.data.passback_params.salon_id,
        username: res.data.buyer_login_id,
        packageId: res.data.passback_params.package_id,
        serviceId:res.data.passback_params.service_id,
      };
      axios.post("/shopfront/addorder", obj).then((res) => {
        if (res.data.code == 200) {
          console.log("添加成功");
        }
      });
    } else {
      let obj = {
        amout: res.data.total_amout, //金额
        trade: res.data.trade_no, //订单号
        phone: res.data.passback_params.phone, //电话
        time: res.data.passback_params.datetime, //预约时间
        stylistId: res.data.passback_params.stylist_id,
        salonId: res.data.passback_params.salon_id,
        username: res.data.buyer_login_id,
        serviceId: res.data.passback_params.service_id,
      };
      axios.post("/shopfront/addorder", obj).then((res) => {
        if (res.data.code == 200) {
          console.log("添加成功");
        }
      });
    }
  }
});
</script>
<style scoped>
.box {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  padding: 0 10px;
  background-color: #ffb900;
  position: relative;
}

.head {
  width: 100%;
  height: 10%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.3rem;
  color: #fff;
}

.main {
  width: 90%;
  height: 70%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  border-radius: 1rem;
}

.btn {
  width: 90%;
  height: 3.5rem;
  background-color: #40c4aa;
  border: none;
  border-radius: 0.8rem;
  font-size: 1.2rem;
  color: #fff;
  margin-top: 1rem;
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
}
</style>